<template>
  <a-modal width="620px" v-model:visible="visible" :mask-closable="false" title="更换车型" @cancel="close" @close="close" unmount-on-close>
    <div class="custom-modal-body">
      <page-form class="custom-page-form" :model="form" :rules="rules" ref="formRef">
        <page-form-row :gutter="0">
          <page-form-item label="车牌号" size="1">{{ details.licenseNo }}</page-form-item>
          <page-form-item label="原车型" size="1">{{ details.modelName }}</page-form-item>
          <page-form-item label="修改车型为" field="modelId" required size="1">
            <remote-select
              v-model="form.modelId"
              placeholder="请选择"
              type="car_model_tenantList"
              popup-container="#app"
              :trigger-props="{ autoFitPopupMinWidth: true }"
              :params="{ modelId: details.modelId }"
            />
          </page-form-item>
        </page-form-row>
      </page-form>
    </div>
    <template #footer>
      <a-button @click="close">关闭</a-button>
      <a-button type="primary" @click="ok" :loading="loading">确认</a-button>
    </template>
  </a-modal>
</template>

<script setup lang="ts">
  import { computed, ref } from 'vue'

  const props = defineProps({
    modelValue: {
      type: Boolean,
      default: false,
    },
    details: {
      type: Object,
      default: () => ({}),
    },
    okLoading: {
      type: Boolean,
      default: false,
    },
  })
  const emits = defineEmits(['update:modelValue', 'update:okLoading', 'ok'])

  const visible = computed({
    get: () => props.modelValue,
    set: (value) => emits('update:modelValue', value),
  })
  const loading = computed({
    get: () => props.okLoading,
    set: (value) => emits('update:okLoading', value),
  })

  const formRef = ref<any>()
  const form = ref({
    modelId: null,
  })
  const rules = {
    modelId: { required: true, message: '请选择车型' },
  }

  const ok = () => {
    formRef.value.validate((error: any) => {
      if (!error) {
        loading.value = true
        console.log('ok')
        emits('ok', form.value)
      }
    })
  }
  const close = () => {
    console.log('close')
    visible.value = false
    loading.value = false
    form.value = {
      modelId: null,
    }
  }
</script>

<style lang="less" scoped>
  .custom-page-form {
    /deep/ .arco-form-item-label-col {
      width: 100px;
      flex: unset;
      flex-shrink: 0;
    }
    /deep/ .arco-form-item-wrapper-col {
      flex: unset;
      width: calc(100% - 100px);
    }
  }
</style>
